﻿
@{
    ViewBag.Title = "Register";
}

<style>
    .login-screen-content {
        position: relative;
    }

    .space {
        width: 100%;
        height: 200px;
    }

    .image {
        width: 100%;
        height: 270px;
        background: url("/imgs/account-bg.jpg") #007aff;
        background-position-x: center;
        background-position-y: top;
        background-repeat: no-repeat;
        position: absolute;
        z-index: -10;
        top: 0;
    }

    .login-box {
        width: 80%;
        margin: 0 auto;
        background-color: #ffffff;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: rgba(0,0,0,0.6) 3px 5px 10px;
    }

    .captcha {
        height: var(--f7-input-height);
        width: auto;
    }
</style>
<div class="page no-navbar no-toolbar no-swipeback" data-page="register">
    <div class="page-content login-screen-content">
        <div class="image"></div>
        <div class="space"></div>
        <div class="login-box">
                <div class="list">
                    <ul>
                        <li>
                            <div class="item-content item-input">
                                <div class="item-inner">
                                    <div class="item-title item-label">用户名</div>
                                    <div class="item-input-wrap">
                                        <input type="text" PlaceHolder="请输入用户名" name="UserName" />
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content item-input">
                                <div class="item-inner">
                                    <div class="item-title item-label">手机号</div>
                                    <div class="item-input-wrap">
                                        <input type="text" PlaceHolder="请输入手机号" name="MobileNumber" />
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content item-input">
                                <div class="item-inner">
                                    <div class="item-title item-label">密码</div>
                                    <div class="item-input-wrap">
                                        <input type="password" PlaceHolder="请输入密码" name="Password" />
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content item-input">
                                <div class="item-inner">
                                    <div class="item-title item-label">验证码</div>
                                    <div class="item-input-wrap">
                                        <div class="row">
                                            <div class="col-50">
                                                <input type="text" PlaceHolder="请输入验证码" name="verCode" />
                                            </div>
                                            <div class="col-50">
                                                <img src="@Url.Action("GetVerCode","Home")" id="imgVerifyCode" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="block">
                    <div class="list">
                        <ul>
                            <li>
                                <input id="btnRegister" type="submit" class="button button-fill button-large button-round" value="免费注册">
                            </li>
                        </ul>
                        <div class="block-footer">
                            <p>
                                已有账号？<a href="@Url.Action("Login","Home")" class="close-login-screen external">现在登录</a>
                            </p>
                        </div>
                    </div>
                </div>      
        </div>
    </div>
</div>
@section footScript{
    <script>
         $("#imgVerifyCode").click(function () {
            var src = "@Url.Action("GetVerCode", "Home")?" + Math.random();
            $("#imgVerifyCode").attr("src", src )
        })
    </script>
    <script>
        $(function () {
            $("#formMain").attr("action", "@Url.Action("SubmitRegister", "Home")");
            $("#formMain").attr("method", "post");

            //增加手机号验证规则
            $.validator.addMethod("isMobile", function (value, element) {
                var length = value.length;
                var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
                return this.optional(element) || (length == 11 && mobile.test(value));
            }, "请正确填写您的手机号码");

            $("#formMain").validate({
                rules: {
                    UserName: {
                        required: true,
                        maxlength: 30
                    },
                    MobileNumber: {
                        required: true,
                        isMobile: true
                    },
                    Password: {
                        required: true,
                        maxlength: 50
                    },
                    verCode: {
                        required: true,
                    },
                },

                messages: {
                    UserName: {
                        required: "用户名不能为空",
                    },
                    MobileNumber:{
                        required: "手机号不能为空",
                        isMobile: "请输入正确的手机号码"
                    },
                    Password: {
                        required: "密码不能为空"
                    },
                    verCode: {
                        required: "验证码不能为空"
                    },
                },

                //提交表单
                submitHandler: function (form) {
                    //使用ajax方式提交表单
                    $(form).ajaxSubmit({
                        success: function (data) {
                            //State=0成功
                            if (data.StatusCode == 0) {
                                location.href = "@Url.Action("Login","Home")";
                            } else {
                                layer.msg(data.Message, { icon: 2 });
                            }
                        }
                    });
                }
            });
        });
    </script>
}

